<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>签到表模版</title>
    <style>
        body {
            font-family: 'SimSun', '宋体', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #fff;
            display: flex;
            justify-content: center;
        }
        .container {
            background-color: white;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            position: relative;
            margin: 20px;
            width: 210mm; /* A4 width */
            min-height: 297mm; /* A4 height */
            border-radius: 8px;
        }
        .signin-sheet {
            position: relative;
            margin: 20px;
            padding: 10px;
            background-color: white;
            transition: all 0.3s ease;
        }
        .sheet-header {
            text-align: center;
            margin-bottom: 20px;
        }
        .sheet-title {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .sheet-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            font-size: 16px;
        }
        .signin-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        .signin-table th, .signin-table td {
            border: 1px solid #333;
            padding: 8px;
            text-align: center;
        }
        .signin-table th {
            font-weight: bold;
            background-color: #f0f0f0;
        }
        .editable {
            display: inline-block;
            padding: 2px 5px;
            text-align: left;
            transition: all 0.2s ease;
        }
        .editable:focus {
            outline: none;
            border-bottom: 2px solid #2196F3;
            background-color: #f9f9f9;
        }
        .date-input {
            display: inline-block;
            text-align: center;
            border: none;
            border-bottom: 1px dotted #333;
            margin: 0 5px;
            transition: all 0.2s ease;
            background: transparent;
        }
        .date-input:focus {
            outline: none;
            border-bottom: 2px solid #2196F3;
            background-color: #f9f9f9;
        }
        .watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 80px;
            color: rgba(200, 200, 200, 0.2);
            z-index: 0;
            pointer-events: none;
            transform: translate(-50%, -50%) rotate(-15deg);
        }
        .controls-container {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .print-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .print-btn:hover {
            background: linear-gradient(135deg, #5a6fc5 0%, #6a3e91 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        .print-btn:active {
            transform: translateY(0);
        }
        .add-btn {
            background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .add-btn:hover {
            background: linear-gradient(135deg, #3d8b40 0%, #1b5e20 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        .import-btn {
            background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .import-btn:hover {
            background: linear-gradient(135deg, #e68a00 0%, #e65100 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        #fileInput {
            display: none;
        }

        @media print {
            body {
                background-color: white;
                padding: 0;
                margin: 0;
            }
            .container {
                box-shadow: none;
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
            }
            .controls-container {
                display: none !important;
            }
            
            .watermark {
                display: none;
            }
            
            .signin-table th, .signin-table td {
                border: 1px solid #000 !important;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="signinSheet" class="signin-sheet">
            <div class="watermark">签到表</div>
            <div class="sheet-header">
                <div class="sheet-title" contenteditable="true">签到表</div>
            </div>
            
            <div class="sheet-info">
                <div>地点: <span id="eventLocation" class="editable" contenteditable="true"></span></div>
                <div>单位: <span id="organizer" class="editable" contenteditable="true"></span></div>
            </div>
            
            <table class="signin-table">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>单位/部门</th>
                        <th>联系电话</th>
                        <th>签到时间</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody id="signinTable">
                    <!-- 默认10行签到信息 -->
                    <tr>
                        <td>1</td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                        <td><span class="editable" contenteditable="true"></span></td>
                    </tr>
                </tbody>
            </table>
            
            <div class="sheet-info" style="margin-top: 20px;">
                <div>应到人数: <span id="expectedCount" class="editable" contenteditable="true" style="width:50px;"></span></div>
                <div>实到人数: <span id="actualCount" class="editable" contenteditable="true" style="width:50px;"></span></div>
                <div>缺席人数: <span id="absentCount" class="editable" contenteditable="true" style="width:50px;"></span></div>
            </div>
            
            <div class="sheet-info" style="justify-content: flex-end; margin-top: 30px;">
                <div>记录人: <span class="editable" contenteditable="true" style="width:80px;"></span></div>
                <div>日期: 
                    <input type="text" id="yearInput" class="date-input" maxlength="4" style="width:40px;">年
                    <input type="text" id="monthInput" class="date-input" maxlength="2" style="width:20px;">月
                    <input type="text" id="dayInput" class="date-input" maxlength="2" style="width:20px;">日
                </div>
            </div>
        </div>
        
        <!-- 控制面板 -->
        <div class="controls-container">
            <!-- 导入Excel按钮 -->
            <button type="button" id="importExcel" class="import-btn">
                <i class="fa fa-file-excel mr-2"></i>导入Excel
            </button>
            <input type="file" id="fileInput" accept=".xlsx, .xls">
            
            <!-- 添加行按钮 -->
            <button type="button" id="addRow" class="add-btn">
                <i class="fa fa-plus mr-2"></i>添加行
            </button>
            
            <!-- 打印按钮 -->
            <button type="button" id="printSheet" class="print-btn">
                <i class="fa fa-print mr-2"></i>打印签到表
            </button>
        </div>
    </div>

    <!-- 引入xlsx库用于解析Excel文件 -->
    <script src="../js/xlsx.full.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 打印签到表
            document.getElementById('printSheet').addEventListener('click', function() {
                window.print();
            });
            
            // 添加行
            document.getElementById('addRow').addEventListener('click', function() {
                const table = document.getElementById('signinTable');
                const rowCount = table.rows.length;
                const newRow = table.insertRow();
                
                newRow.innerHTML = `
                    <td>${rowCount + 1}</td>
                    <td><span class="editable" contenteditable="true"></span></td>
                    <td><span class="editable" contenteditable="true"></span></td>
                    <td><span class="editable" contenteditable="true"></span></td>
                    <td><span class="editable" contenteditable="true"></span></td>
                    <td><span class="editable" contenteditable="true"></span></td>
                `;
                
                // 为新添加的行添加事件监听
                addRowEventListeners(newRow);
            });
            
            // 导入Excel
            document.getElementById('importExcel').addEventListener('click', function() {
                document.getElementById('fileInput').click();
            });
            
            document.getElementById('fileInput').addEventListener('change', handleFile);
            
            // 日期输入限制
            document.querySelectorAll('.date-input').forEach(input => {
                input.addEventListener('input', function() {
                    this.value = this.value.replace(/[^0-9]/g, '');
                    
                    // 年、月、日长度限制
                    if (this.id === 'yearInput' && this.value.length > 4) {
                        this.value = this.value.slice(0, 4);
                    } else if ((this.id === 'monthInput' || this.id === 'dayInput') && this.value.length > 2) {
                        this.value = this.value.slice(0, 2);
                    }
                    
                    // 月份范围限制
                    if (this.id === 'monthInput' && parseInt(this.value) > 12) {
                        this.value = '12';
                    }
                    
                    // 日期范围限制
                    if (this.id === 'dayInput' && parseInt(this.value) > 31) {
                        this.value = '31';
                    }
                });
            });
            
            // 自动计算人数
            function updateCounts() {
                const expected = parseInt(document.getElementById('expectedCount').textContent) || 0;
                const actual = parseInt(document.getElementById('actualCount').textContent) || 0;
                const absent = expected - actual;
                document.getElementById('absentCount').textContent = absent > 0 ? absent : 0;
            }
            
            // 为所有可编辑单元格添加事件监听
            function addRowEventListeners(row) {
                const editables = row.querySelectorAll('.editable');
                editables.forEach(editable => {
                    editable.addEventListener('input', updateCounts);
                });
            }
            
            // 为现有行添加事件监听
            document.querySelectorAll('#signinTable tr').forEach(row => {
                addRowEventListeners(row);
            });
            
            document.getElementById('expectedCount').addEventListener('input', updateCounts);
            document.getElementById('actualCount').addEventListener('input', updateCounts);
            
            // 处理Excel文件导入
            async function handleFile(e) {
                const file = e.target.files[0];
                if (!file) return;
                
                try {
                    const data = await file.arrayBuffer();
                    const workbook = XLSX.read(data);
                    const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
                    const jsonData = XLSX.utils.sheet_to_json(firstSheet, { header: 1 });
                    
                    // 清空现有表格（保留表头）
                    const table = document.getElementById('signinTable');
                    while (table.rows.length > 0) {
                        table.deleteRow(0);
                    }
                    
                    // 添加表头
                    const headerRow = table.insertRow();
                    
                    // 添加数据行
                    for (let i = 1; i < jsonData.length; i++) {
                        const rowData = jsonData[i];
                        const newRow = table.insertRow();
                        
                        newRow.innerHTML = `
                            <td>${i}</td>
                            <td><span class="editable" contenteditable="true">${rowData[0] || ''}</span></td>
                            <td><span class="editable" contenteditable="true">${rowData[1] || ''}</span></td>
                            <td><span class="editable" contenteditable="true">${rowData[2] || ''}</span></td>
                            <td><span class="editable" contenteditable="true">${rowData[3] || ''}</span></td>
                            <td><span class="editable" contenteditable="true">${rowData[4] || ''}</span></td>
                        `;
                        
                        addRowEventListeners(newRow);
                    }
                    
                    // 更新人数统计
                    document.getElementById('expectedCount').textContent = jsonData.length - 1;
                    document.getElementById('actualCount').textContent = jsonData.length - 1;
                    updateCounts();
                    
                    alert(`成功导入 ${jsonData.length - 1} 条数据`);
                } catch (error) {
                    console.error('导入Excel出错:', error);
                    alert('导入Excel文件失败，请检查文件格式');
                }
                
                // 清空文件输入，以便可以重复选择同一文件
                e.target.value = '';
            }
        });
    </script>
</body>
</html>